<template>
  <el-dialog
    ref="isPopWindows"
    v-dialogDrag
    title="提示"
    :visible="isViewPart"
    width="70%"
    :append-to-body="true"
    :close-on-click-modal="false"
    center
    @close="close"
    @opened="open"
  >
    <dialogHeader
      slot="title"
      title="备件选择"
      :style-type="$store.state.app.dialogType"
    />
    <div class="formBoxContain">
      <!--
            buttons: 按钮
            froms: 表单
            fromsField: 表单对应的字段
            tableOption: 网格项
            dynamicApiConfigs: 取值
         -->

      <one-table-template
        ref="multipleTable"
        :dynamic-buttons="tableButtons"
        :dynamic-components="tableComponents"
        :dynamic-table-defult-height="350"
        :dynamic-api-config="dynamicApiConfigs"
        :dynamic-table-cols="tableCols"
        :dynamic-form-fields="formField"
        :dynamic-is-show-select="true"
        :dynamic-is-init-table="false"
        :dynamic-is-show-more-btn="true"
        :dynamic-page-size="10"
        :callback-obj="callbackObj"
        :row-class-name="rowClassName"
        :stripe="false"
      />
    </div>
  </el-dialog>
</template>

<script>
import dialogHeader from '@/components/dialogHeader'
import OneTableTemplate from '@/components/templates/oneTable'
import { vehiclePdiPriceInquirys } from '@/api/se/vehiclePdiPriceInquiry'
import api from '@/api/vehicleManagement'

export default {
  components: {
    dialogHeader,
    OneTableTemplate
  },
  props: {
    // 是否关闭弹窗
    isViewPart: {
      type: Boolean,
      default: false
    },
    rowData: {
      type: Object,
      default: () => ({})
    },
    chosenList: {
      type: Array,
      default: () => ([])
    },
    // 已经选择过的数据
    shortList: { type: Array, default: () => ([]) }
  },
  data() {
    null
    // 页面标识（与上面beforeRouteEnter中的对应）
    const viewPageCode = this.$route.path

    // 绑定事件配置化事件
    this.$ConfigCache.CacheConfig.bindEvent(this, [viewPageCode])
    return {
      // dynamicApiConfigs: vehiclePdiPriceInquirys.queryPartList,
      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents.length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
            .tableComponents
          : [
            {
              compKey: 'compKey1',
              labelName: '备件号：',
              codeField: 'partNo',
              component: () => import('@/components/org/commonInput'),
              isInput: true,
              isMust: true,
              span: 8
            },
            {
              compKey: 'compKey2',
              labelName: '备件名称：',
              codeField: 'partName',
              component: () => import('@/components/org/commonInput'),
              isInput: true,
              isMust: true,
              span: 8
            },
            // {
            //   compKey: 'compKey3',
            //   labelName: '所有者类型：',
            //   codeField: 'c',
            //   component: () => import('@/components/org/LookupValue'),
            //   oFields: 'statusId,statusText',
            //   options: [
            //     { statusId: '', statusText: '全部' },
            //     { statusId: '0', statusText: '总部' },
            //     { statusId: '1', statusText: '自定义' }
            //   ],
            //   type: 'dropdownList',
            //   isMul: false,
            //   isMust: true,
            //   span: 8
            // },
            // {
            //   compKey: 'compKey4',
            //   labelName: '备件属性：',
            //   codeField: 'd',
            //   component: () => import('@/components/org/LookupValue'),
            //   oFields: 'statusId,statusText',
            //   options: [
            //     { statusId: '', statusText: '全部' },
            //     { statusId: '0', statusText: '一般维修件' },
            //     { statusId: '1', statusText: '碰撞件' },
            //     { statusId: '2', statusText: '保养件' },
            //     { statusId: '3', statusText: '易损件' },
            //     { statusId: '4', statusText: '工具件' },
            //     { statusId: '5', statusText: '辅料' }
            //   ],
            //   type: 'dropdownList',
            //   isMul: false,
            //   isMust: false,
            //   span: 8
            // },
            {
              compKey: 'compKey5',
              labelName: '维修类别：',
              codeField: 'partRepairType',
              component: () => import('@/components/org/commonSelect'),
              oFields: 'partRepairType,partRepairTypeCn',
              customObj: {
                api: {
                  APIUrl: '/mp/e3sh/spareparts/finance/partDiscountSettingDlrService/queryRepairTypes.do'
                }
              },
              type: 'dropdownList',
              isMul: false,
              isMust: true,
              span: 8
            },
            // {
            //   compKey: 'compKey6',
            //   labelName: '适用车型：',
            //   codeField: 'carConfigCn',
            //   component: () => import('@/components/org/commonInput'),
            //   isInput: true,
            //   isMust: true,
            //   span: 8
            // },
            {
              compKey: 'compKey6',
              labelName: '适用车型：',
              codeField: 'carConfigCode',
              textField: 'carConfigCn',
              span: 8,
              component: () => import('@/views/ve/planReport/components/multipleSearchInput'),
              dataToObject: {
                oFields: 'carConfigCode,carConfigCn',
                // 控制弹窗页面 搜索 网格 元素
                tableComponents: [
                  {
                    compKey: 'compKey1',
                    labelName: '车型编码：',
                    codeField: 'carConfigCode',
                    isMul: false,
                    component: () => import('@/components/org/commonInput'),
                    type: 'inputText',
                    isMust: true,
                    span: 8
                  },
                  {
                    compKey: 'compKey2',
                    labelName: '车型名称：',
                    codeField: 'carConfigCn',
                    isMul: false,
                    component: () => import('@/components/org/commonInput'),
                    type: 'inputText',
                    isMust: true,
                    span: 8
                  }
                ],
                tableCols: [
                  {
                    prop: 'carSeriesCode',
                    label: '车系编码'
                  },
                  {
                    prop: 'carSeriesCn',
                    label: '车系名称'
                  },
                  {
                    prop: 'carConfigCode',
                    label: '车型编码'
                  },
                  {
                    prop: 'carConfigCn',
                    label: '车型名称'
                  }
                ],
                formField: {
                  carConfigCode: '',
                  carConfigCn: ''
                },
                returnField: {
                  prop: 'carConfigCode',
                  label: '车型编码'
                },
                api: { APIUrl: 'mp/e3sh/spareparts/basic/partPriceQueryService/queryCarConfigCodes.do', ServiceCode: 'queryCarConfigCodes' }
              },
              type: 'inputText',
              isMul: false,
              isMust: true
            }
          ],
      formField: this.$utils.getFormField(this, {
        partNo: '',
        partName: '',
        partRepairType: '',
        carConfigCode: '',
        carConfigCn: ''
      }),
      // 回调方法
      callbackObj: {
        // 网格点击回调事件
        // onRowClick: (currentRow) => {
        //   this.onRightRowClick(currentRow)
        // },
        // 手动勾选网格时，拿到勾选网格的数据
        onCheckSelectChange: (selection, row) => {
          this.selectiondata = selection
        },
        // 选择项禁用  返回 false 为禁用
        onSelectable: (row, index) => !this.chosenList.includes(row['partId'])

      },
      tableButtons: [
        {
          compKey: 'button1',
          type: 'primary',
          size: 'small',
          name: 'search',
          clickEvent: () => this.open(),
          text: '查询',
          position: 'right'
        },
        {
          compKey: 'button1',
          type: 'primary',
          size: 'small',
          name: 'reset',
          clickEvent: () => {
            for (const attr in this.formField) {
              this.formField[attr] = ''
            }
          },
          text: '重置',
          position: 'right'
        },
        {
          compKey: 'button5',
          type: 'primary',
          size: 'small',
          icon: '',
          name: 'select',
          clickEvent: () => this.notarize(),
          text: '选择信息',
          position: 'right'
        }
        // {
        //   compKey: "button6",
        //   type: "",
        //   size: "small",
        //   icon: "",
        //   name: "delete",
        //   clickEvent: () => this.$refs.isPopWindowsTable.reset(),
        //   text: "删除",
        //   position: "right",
        // },
      ],
      // 动态生成网格列
      tableCols:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          : [
            {
              prop: 'partNo',
              label: '备件号',
              align: 'center'
            },
            {
              prop: 'partName',
              label: '缺件名称',
              align: 'center'
            },
            {
              prop: 'unit',
              label: '计量单位',
              align: 'center'
            },
            {
              prop: 'minPurchasePage',
              label: '最小订货数',
              align: 'center'
            },
            {
              prop: 'purPrice',
              label: '单价',
              align: 'center',
              sortable: 'custom'
            },
            {
              prop: 'purQty',
              label: '订货数量',
              align: 'center',
              isComponent: true
            },
            {
              prop: 'sumAccountQtyStatus',
              label: '总部库存状态',
              align: 'center'
            },
            // {
            //   prop: 'partAttr',
            //   label: '备件属性',
            //   align: 'center'
            // },
            {
              prop: 'partRepairTypeCn',
              label: '维修类别',
              align: 'center'
            },
            {
              prop: 'carConfigIdList',
              label: '适用车型',
              align: 'center',
              width: 150
            }
            // {
            //   prop: "repairOrderCode",
            //   label: "派工单号",
            //   align: "center",
            //   isComponent: true,
            // },
            // {
            //   prop: "vin",
            //   label: "VIN",
            //   align: "center",
            //   isComponent: true,

            // },
            // {
            //   prop: "carLicense",
            //   label: "车牌号",
            //   align: "center",
            //   isComponent: true,
            // },
            // {
            //   prop: "custName",
            //   label: "客户名称",
            //   align: "center",
            //   isComponent: true,
            // },
            // {
            //   prop: "custTel",
            //   label: "客户电话",
            //   align: "center",
            //   isComponent: true,
            // }
          ],
      dynamicApiConfigs: { ServiceCode: 'queryPartList', APIUrl: '/mp/e3sh/spareparts/mallorder/partOrderMakeDlrService/queryPartList.do' }
    }
  },
  mounted() {

  },
  methods: {
    rowClassName({ row }) {
      if (this.chosenList.includes(row['partId'])) {
        return 'warning-row'
      }
      return ''
    },
    /**
     * @description 关闭弹窗
     * @time 2021、01、22
     */
    close() {
      this.$emit('update:is-view-part', false)
    },
    open() {
      const that = this.$refs['multipleTable']
      if (this.rowData.isHq) {
        // 总部 api
        that.apiConfig = { APIUrl: '/mp/e3sh/spareparts/sparePartsOrderMakingService/queryPartChoose.do' }
      } else {
        // 网点 api
        that.apiConfig = vehiclePdiPriceInquirys.queryPartList
      }
      // 页， dataType, 每页数量, 请求成功回调, 自定义参数
      that.queryTable(1, '', 10, '', (res) => {
        // 请求成功回调
      }, {
        formField: {
          ...this.formField,
          supplierId: this.rowData.supplierId || '',
          supplierCode: this.rowData.supplierCode || ''
        }
      })
    },
    addIndex(rows) {
      rows.forEach((row, index) => {
        if (!row.hasOwnProperty('index')) {
          row['index'] = index
        }
      })
      return rows
    },
    // 确认
    notarize() {
      this.$emit('selectiondataPart', this.selectiondata)
      this.$emit('update:is-view-part', false)
      this.selectiondata = []
    },
    // 禁用上个弹窗已选择 数据
    getSelectable(row, index, ref) {
      return !this.shortList.includes(row['partNo'])
    },
  }
}
</script>
<style lang="css" scoped>
  >>>.el-table .warning-row {
    background: #eae2d0;
  }
</style>
